<script setup>
import WMButton from './components/WMButton.vue'
import AiWord from './components/AiWord.vue'
import lottie from 'lottie-web';
import 'animate.css';
import { onMounted, onUnmounted } from 'vue';

const cxt = getCurrentInstance() // context === vue2 this
const bus = cxt.appContext.config.globalProperties.$bus
let animationTriggered = ref(false);
const lottieAI = ref(null);
const AiRobot = ref(null);

onMounted(() => {
  bus.on('isRenderTemplate', (value) => {
    animationTriggered.value = value;
  });

  AiRobot.value = lottie.loadAnimation({
    container: lottieAI.value,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: `https://kanekikeh.online/A/lotties/AiRobot.json`,
    fps: 60
  });
});

onUnmounted(() => { bus.off('isRenderTemplate') })

</script>

<template>
  <v-container fluid>

    <AiWord />



    <div ref="lottieAI" :class="{ 'AI_Hidden': true, 'animate__animated animate__fadeIn': animationTriggered }"
      :style="{ visibility: animationTriggered ? 'visible' : 'hidden' }"></div>

    <template v-if="animationTriggered">
      <div class="textGroup">
        <p class="title">文无<text style="font-size: 3rem;">AI</text></p>
        <p class="titleEraser">
          <span class="titleText">文无<text style="font-size: 3rem;">AI</text></span>
        </p>

        <p class="introduce">"Unlock the boundless capabilities of GPT-4 without the need for VPNs! Embrace seamless
          AI
          conversations with Wenwu AI, your premier ChatGPT platform for an exceptional experience."</p>
        <p class="eraser">
          <span class="text">
            "Unlock the boundless capabilities of GPT-4 without the need for VPNs! Embrace seamless AI
            conversations with Wenwu AI, your premier ChatGPT platform for an exceptional experience."
          </span>
        </p>

        <WMButton class="btn" />
      </div>
    </template>


  </v-container>
</template>

<style scoped lang="scss">
.v-container--fluid {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-image: linear-gradient(to bottom, #F3EAFD, #fff);
}

.AI_Hidden {
  width: 60%;
  height: 60%;
  position: absolute;
  top: 80%;
  right: -13%;
  transform: translate(0%, -70%);
  transition: transform 0.5s ease-in-out;
}

.AI_Hidden.animate__fadeIn {
  animation-delay: 1s;
  animation-duration: 3s;
}

.textGroup {
  width: 50vw;
  height: 50%;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -20%);
  text-align: center;
  position: relative;
}

.title {
  font-size: 6rem;
  font-weight: bold;
  color: #caaee1;
  letter-spacing: 5px;
  height: 50%;
  position: absolute;
  inset: 0;
  font-family: "Times New Roman", Times, serif;
}

.titleEraser {
  height: 50%;
  font-size: 6rem;
  font-weight: bold;
  color: black;
  letter-spacing: 5px;
  position: absolute;
  inset: 0;
  font-family: "Times New Roman", Times, serif;

  .titleText {
    --t: 0%;
    background: linear-gradient(to right, #0000 var(--t), #F7F1FE calc(var(--t) + 30px));
    color: transparent;

    animation: erase 1.5s ease-in-out forwards;
    -webkit-animation: erase 1.5s ease-in-out forwards;
    -moz-border-bottom-colors: erase 1.5s ease-in-out forwards;
  }
}

.introduce {
  font-size: 1.1rem;
  font-style: italic;
  color: #67676C;
  position: absolute;

  top: 50%;

}

.eraser {
  font-size: 1.1rem;
  font-style: italic;
  color: #67676C;

  position: absolute;
  top: 50%;

  .text {
    --p: 0%;
    background: linear-gradient(to right, #0000 var(--p), #F7F1FE calc(var(--p) + 30px));
    color: transparent;

    animation: erase 3s ease-in-out forwards;
    -webkit-animation: erase 3s ease-in-out forwards;
    -moz-border-bottom-colors: erase 3s ease-in-out forwards;
  }
}

@property --p {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

@property --t {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

@keyframes erase {
  to {
    --p: 100%;
    --t: 100%;
  }
}

.btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}
</style>